import React, { Component } from "react";
import { connect } from "react-redux";
import {isShowAllTabs,labeIndex,routingId} from '../../store/actionCreator'
import {withRouter} from 'react-router-dom'

// 引入css
import styles from "./LabelBar.module.scss";
// import "./LabelBar.scss";

class labelBar extends Component {
 
  constructor(props){
    super(props);
    this.myul = React.createRef();// 创建一个引用
  }
  componentDidMount(props){
    if (this.props.left) {
      console.log(this.props.left);
       if (this.props.left<=345) {
          this.myul.current.style.left=-this.props.left+'px'
        }else{
          this.myul.current.style.left='-345px'
        }
    }
  }
  render() {
    return (
      <div>
        {/* 标签栏开始 */}
        <section className={styles.horizontalTabBar}>
          <section>
            <ul className={styles.iconArrow} ref={this.myul}>
              {this.props.allChannels.map((v, i) => (
                <li key={i} className={this.props.labeIndex===i?styles.horizontalTabBarLi:''}
                onClick={() => {
                  this.props.labelBarClicks.call(this,i,v.id);
                }}
              >{v.name}</li>
              ))}
            </ul>
            <span></span>
          </section>
          
          <span className={(()=>{
            let className = 'iconfont icon-arrow-down '; 
            className+=" "+styles.iconArrow+" ";
            let showAllTabs=this.props.showAllTabs==='block'?styles.iconArrowRotate:''
            className+= " " +showAllTabs ;
            return className;

          })()} onClick={()=>{this.props.isShowAllTabss(this.props.showAllTabs==='block'?true:false)}}></span>
        </section>
        <section className={styles.allTabs} style={{display:this.props.showAllTabs}}>
          <div>
            <section>
              <h2>全部频道</h2>
              {/* <span class="iconfont icon-shangjiantou"></span> */}
            </section>
            <ul>
              {this.props.allChannels.map((v, i) => (
                <li key={i} className={this.props.labeIndex===i?styles.horizontalTabBars:''}
                onClick={(e) => {
                  this.props.labelBarClicks.call(this,i,v.id,e);
                }}>{v.name}</li>
              ))}
            </ul>
          </div>
        </section>
      </div>
    );
  }
}
const mapStateToProps = (state) => {
 
  return {
    allChannels: state.getIn(["home", "allChannels"]),
    showAllTabs:state.getIn(['home','showAllTabs'])?"block":"none",
    labeIndex:state.getIn(['home','labeIndex']),
    id:state.getIn(['home','id']),
    sumLeftWidth:state.getIn(['home','sumLeftWidth'])
  };
};

const MapDispatchToProps =  (dispatch) => {
  return {
    isShowAllTabss:(detail)=>{
        // 也可以不去获取事件源直接去类名里面修改
        // let element=document.getElementsByClassName('icon-arrow')
        // console.log(element[0].classList);
        // if(detail) {
        //     element[0].classList.remove("icon-arrow-rotate");
        // }else {
        //     element[0].classList.add("icon-arrow-rotate");
        // }
        dispatch(isShowAllTabs(detail))
      },
     labelBarClicks:function(i,id,e){
      // console.log(this);
      let childers=Array.from(this.myul.current.children);
      let sumWidth=0;
      childers.forEach((v,index)=>{
        if(index>=i-1) return;
        sumWidth+=v.offsetWidth;
      })
      // dispatch(updateSumWidth(sumWidth));
      if (sumWidth<=345) {
        this.myul.current.style.left=-sumWidth+'px'
      }else{
        this.myul.current.style.left='-345px'
      }
      if(e!==undefined){
        this.props.isShowAllTabss(this.props.showAllTabs==='block'?true:false)

      }
      // console.log(e.target.offsetWidth);
      // console.log(sumWidth);
      dispatch(labeIndex(i))
      dispatch(routingId(id))
      if(id!=='0'){
      
        this.props.history.push('/home1')
     
      }
      else{
        this.props.history.push('/')
      }
    }  
  };
};

export default connect(mapStateToProps, MapDispatchToProps)(withRouter(labelBar));
